<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
    <title>Cycle App</title>
    <style lang="">
      body, html {
        padding: 0;margin: 0;width: 100%;height: 100%;
      }
      body {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      section {
        display: flex;
      }
      .control {
        display: flex;
        align-items: center;
        margin-right: 120px;
      }
      .mark {
        display: flex;
        width: 30px;
        height: 30px;
        overflow: hidden;
        /* outline: 1px solid red; */
        margin-left: 10px;
        background-color: #aaa;
    
      }
      .list {
        display: flex;
        flex-direction: column;
        flex: 0;
        transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95)
      }
      .list > span {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
      }
      main {
        width: 400px;
        flex: none;
      }

    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
